<template>
  <div class="row">
    <label class="col-sm-3 col-form-label text-end text-truncate">{{ t('style.form.values') }}</label>
    <div class="col-sm-9">
      <div class="list-group">
        <template v-if="valueItems && valueItems.length>0">
          <draggable v-model="valueItems" handle=".icon-drag" @change="sortValueItems">
            <transition-group>
            <div class="list-group-item p-1 d-flex justify-content-between align-items-center" v-for="(item, index) in valueItems" :key="index">
              <div><i class="iconfont icon-drag" style="cursor: move"></i></div>
              <label class="flex-grow-1 m-0 text-truncate d-flex align-items-center">
                <input type="radio" v-if="!isMultiple" :checked="item.checked" @click="updateChecked(index)" class="me-1" :name="selectedUIItemId+'defaultValue'">
                <input type="checkbox" v-if="isMultiple" :checked="item.checked" @click="updateChecked(index)" class="me-1" :name="selectedUIItemId+'defaultValue'">
                {{item.name}} ({{item.value}})</label>
              <div class="d-flex align-items-center">
                <button type="button" @click="openSetting(index)" class="btn border-0 btn-outline-light btn-sm p-0 ps-1 pe-1 text-muted"><i class="iconfont icon-edit"></i></button>
                <ConfirmRemove @remove="remove(index)" icon="icon-remove"></ConfirmRemove>
              </div>
            </div>
            </transition-group>
          </draggable>
        </template>
      </div>
      <button type="button" @click="openSetting(-1)" class="btn btn-outline-primary btn-block btn-sm mt-1 mb-2">
        {{t('style.form.addValue')}}
      </button>
      <slot></slot>
    </div>
  </div>

  <div v-if="isOpenSetting" style="z-index: 1041;position: absolute;top: 30%;left:0px;right: 0px">
    <div class="card m-3 shadow-lg">
      <div class="card-header d-flex justify-content-between">
        <div></div>
        <button type="button" class="btn btn-light btn-sm" @click="closeSetting" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="card-body">
        <div class="form-group row mt-2">
          <label for="form-text" class="col-sm-3 col-form-label">{{ t('style.form.text') }}</label>
          <div class="col-sm-9">
            <input type="text" class="form-control form-control-sm" id="form-text" v-model="newItem.name">
          </div>
        </div>
        <div class="form-group row mt-2">
          <label for="form-value" class="col-sm-3 col-form-label">{{ t('style.form.value') }}</label>
          <div class="col-sm-9">
            <input type="text" :class="{'form-control form-control-sm': true, 'is-invalid':valueInvalid}" :placeholder="t('style.form.valueTip')" id="form-value" v-model="newItem.value">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-9 offset-3">
            <div class="form-check form-check-inline">
              <input type="checkbox" class="form-check-input" id="form-default" :checked="newItem.checked" v-model="newItem.checked">
              <label for="form-default" class=" form-check-label text-truncate">{{ t('style.form.default') }}</label>
            </div>
          </div>
        </div>
        <div class="row mt-3">
          <div class="col-sm-9 offset-3">
            <button type="button" class="btn btn-primary btn-block" @click="updateValue">{{t('common.ok')}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right-backdrop" v-if="rightBackdropVisible"></div>
</template>

<script lang="ts">
import { useI18n } from 'vue-i18n'
import { computed, nextTick, ref, onMounted } from 'vue'
import UIInit from '@/components/Common'
import { VueDraggableNext } from 'vue-draggable-next'
import ConfirmRemove from '@/components/common/ConfirmRemove.vue'

export default {
  name: 'StyleValueList',
  components: {
    ConfirmRemove,
    draggable: VueDraggableNext
  },
  props: {
    valueIsRequired: Boolean
  },
  setup (props: any, context: any) {
    const initInfo = UIInit()
    const { t } = useI18n()
    const editValueIndex = ref(-1)
    const valueInvalid = ref(false)
    const newItem = ref({ name: '', value: '', checked: false, disabled: false })
    const valueItems = ref<any>([])

    const remove = (index) => {
      valueItems.value.splice(index, 1)
      const values = JSON.parse(JSON.stringify(valueItems.value))
      values.splice(index, 1)
      initInfo.setMeta('values', values)
    }

    const _updateChecked = (index) => {
      if (isMultiple.value) {
        valueItems.value[index].checked = !valueItems.value[index].checked
      } else {
        // 单选的话把其他的反过来
        for (const valueIndex in valueItems.value) {
          valueItems.value[valueIndex].checked = false
        }
        valueItems.value[index].checked = true
      }
    }
    const updateChecked = (index) => {
      _updateChecked(index)
      initInfo.setMeta('values', JSON.parse(JSON.stringify(valueItems.value)))
    }

    const isOpenSetting = ref(false)
    const rightBackdropVisible = ref(false)
    const openSetting = (editItemIndex) => {
      editValueIndex.value = editItemIndex
      valueInvalid.value = false
      if (editItemIndex > -1) {
        newItem.value = JSON.parse(JSON.stringify(valueItems.value[editItemIndex]))
      } else {
        newItem.value = { name: '', value: '', checked: false, disabled: false }
      }
      isOpenSetting.value = true
      nextTick(() => {
        rightBackdropVisible.value = true
      })
    }
    const sortValueItems = (n) => {
      const values = JSON.parse(JSON.stringify(valueItems.value))
      initInfo.setMeta('values', values)
    }
    const closeSetting = () => {
      isOpenSetting.value = false
      rightBackdropVisible.value = false
      editValueIndex.value = -1
    }
    const isMultiple = computed(() => {
      return initInfo.getMeta('multiple', 'custom') || initInfo.selectedUIItem.value.type.toLowerCase() === 'checkbox' || false
    })
    const updateValue = () => {
      const rawItem = JSON.parse(JSON.stringify(newItem.value))
      if (!rawItem && props.valueIsRequired) {
        valueInvalid.value = true
        return
      }
      if (editValueIndex.value > -1) {
        valueItems.value[editValueIndex.value] = rawItem
        if (rawItem.checked) _updateChecked(editValueIndex.value)
        const values = JSON.parse(JSON.stringify(valueItems.value))
        initInfo.setMeta('values', values)
      } else {
        initInfo.setMeta('values', [rawItem], '', true)
        valueItems.value = initInfo.getMeta('values')
      }

      closeSetting()
    }
    onMounted(() => {
      valueItems.value = initInfo.getMeta('values') || []
    })

    return {
      t,
      rightBackdropVisible,
      isOpenSetting,
      editValueIndex,
      openSetting,
      closeSetting,
      isMultiple,
      updateValue,
      valueItems,
      newItem,
      remove,
      updateChecked,
      sortValueItems,
      valueInvalid,
      ...initInfo
    }
  }
}
</script>
